<div class="button-item">
    <button pButton type="text" class="ui-button-success" icon="fa fa-check" (click)="saveUpdate()" [disabled] = "preventQuickClicks" label="保存"></button>
    <button pButton type="text" class="ui-button-danger" icon="fa fa-times" (click)="delete()" label="删除"></button>
</div>
<div style="height:210px;">
    <form [formGroup]="reportForm" style="width:75%;margin-top: 1em;">
        <div class="ui-g-2 label">报表编码</div>
        <div class="ui-g-4">
            <input pInputText type="text" formControlName="reportId" readonly />
        </div>
        <div class="ui-g-2 label">报表名称</div>
        <div class="ui-g-4">
            <input pInputText type="text" formControlName="reportName" />
        </div>
        <div class="ui-g-2 label">报表类型</div>
        <div class="ui-g-4 ui-fluid">
            <input type="hidden" formControlName="reportTypeId" />
            <input pInputText type="text" formControlName="reportTypeName" readonly />
        </div>
        <div class="ui-g-2 label">分组</div>
        <div class="ui-g-4 ui-fluid">
            <input type="hidden" formControlName="groupId" />
            <input pInputText type="text" formControlName="groupName" />
        </div>
        <div class="ui-g-2 label">数据源</div>
        <div class="ui-g-4 ui-fluid">
            <input type="hidden" formControlName="dsId">
            <input pInputText type="text" formControlName="dsName" readonly />
        </div>
        <div class="ui-g-2 label">业务名称</div>
        <div class="ui-g-4 ui-fluid">
            <input type="hidden" formControlName="bizId" />
            <input pInputText type="text" formControlName="bizName" readonly />
        </div>
        <div class="ui-g-2 label">数据视图</div>
        <div class="ui-g-4 ui-fluid">
            <input pInputText type="text" formControlName="dataviewName" readonly />
        </div>
        <div class="ui-g-2 label">排序</div>
        <div class="ui-g-4">
            <input pInputText type="text" formControlName="displayOrder" />
        </div>
    </form>
</div>
<div *ngIf="report.reportTypeId != 3" style="height:calc(100% - 300px);">
    <p-table #dt [columns]="cols" [value]="fields" [scrollable]="true" [scrollHeight]="'calc(100vh - 450px)'" [reorderableColumns]="true">
        <ng-template pTemplate="caption">
            <div style="text-align: right;">
                <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
                <input type="text" pInputText size="50" placeholder="输入关键字查询..."
                    (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
            </div>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th style="width:2.5em"></th>
                <th *ngFor="let col of columns" pReorderableColumn [ngStyle]="col.style">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>

        <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
            <tr style="height: 35px;" [pReorderableRow]="index">
                <td style="width:2.5em">
                    <i class="fa fa-bars" pReorderableRowHandle></i>
                </td>
                <ng-container *ngFor="let col of columns;">
                    <td *ngIf="col.field == 'fieldName' || col.field == 'dataTypeName'" [ngStyle]="col.style">
                        {{ rowData[col.field] }}</td>
                    <!--字段填写列-->
                    <td pEditableColumn
                        *ngIf="col.field == 'fieldDisplayName' || col.field == 'fieldWidth' ||  col.field == 'fieldGroupName'"
                        [ngStyle]="col.style">
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input type="text" [(ngModel)]="rowData[col.field]">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{rowData[col.field]}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <!--是否隐藏列-->
                    <td pEditableColumn *ngIf="col.field == 'visibleFlag'" [ngStyle]="col.style">
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <p-inputSwitch [(ngModel)]="rowData[col.field]"></p-inputSwitch>
                            </ng-template>
                            <ng-template pTemplate="output">
                                <p-inputSwitch [(ngModel)]="rowData[col.field]"></p-inputSwitch>
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <!--对齐方式-->
                    <td *ngIf="col.field == 'textAlign'" [ngStyle]="col.style">
                        <p-dropdown [options]="textAlignTypes" [(ngModel)]="rowData.textAlign"
                            [style]="{'width':'100%', 'border': 'none', 'border-radius': '0px'}" appendTo="body">
                        </p-dropdown>
                    </td>
                </ng-container>
            </tr>
        </ng-template>
    </p-table>
</div>